<template>
  <div class="recommend">
    <div class="content">
      <Scroll id="scroll-recommend" stop horizontal @on-scroll="scrollHandle">
        <div class="scroll-row">
          <div v-for="(l,i) in list" :key="i" class="scroll-col" :style="{width: span, flex: `0 0 ${span}`}" @click.stop="clickHandle(l)">
            <div id="img-recommend" class="image">
              <ImageVideo :host="host" :src="l.src" :is-image="l.type==='image'" fit="fill" />
            </div>
            <div class="masking">
              <div class="label">{{ l.label }}</div>
            </div>
          </div>
        </div>
      </Scroll>
    </div>
    <div v-if="indicatorNum>1" class="indicator">
      <div v-for="i in indicatorNum" :key="i" :class="['indicator-item', {'indicator-item-active': i - 1 === index}]" />
    </div>
  </div>
</template>
<script>
import Scroll from '@/components/Scroll'
import ImageVideo from '@/components/ImageVideo'
export default {
  name: 'Recommend',
  components: {
    Scroll,
    ImageVideo
  },
  props: {
    column: {
      type: Number,
      default: 3
    },
    list: {
      type: Array,
      default: () => []
    },
    host: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      left: 0
    }
  },
  computed: {
    span() {
      return `${100 / this.column}%`
    },
    indicatorNum() {
      return Math.ceil(this.list.length / this.column)
    },
    index() {
      const ele = this.$el.querySelector('#scroll-recommend')
      let i = 0
      if (ele) {
        const width = ele.getBoundingClientRect().width
        i = Math.ceil(this.left / width)
      }
      if (i >= this.indicatorNum)i = this.indicatorNum - 1
      return i
    }
  },
  activated() {
    const ele = this.$el.querySelector('#scroll-recommend')
    if (ele) {
      ele.scrollLeft = this.left
    }
  },
  methods: {
    clickHandle(item) {
      this.$emit('click', item)
    },
    scrollHandle(top, left, topSub, leftSub) {
      this.left = left
    }
  }
}
</script>
<style lang="less" scoped>
.recommend{
  position: relative;
  .content{
    .scroll-row{
      display: flex;
      margin: 0 -5px;
    }
    .scroll-col{
      box-sizing: border-box;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      // align-items: center;
      overflow: hidden;
      // position: relative;
      // width: 110px;
      padding: 0 5px;
      .image{
        width: 110px;
        height: 110px;
      }
      .masking{
        // position: absolute;
        // top: 50%;
        // left: 50%;
        // max-width: 100%;
        // transform: translate(-50%;-50%);
        // top: 0;
        // left: 0;
        // bottom: 0;
        // right: 0;
        // background-color: rgba(3,3,3,0.4);
        // display: flex;
        // justify-content: center;
        // align-items: flex-end;
        max-width: 100%;
        flex: 0 0 100%;
        .label{
          color: black;
          font-size: 14px;
          padding: 5px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: center;
          // height: 32px;
          // line-height: 32px;
          // overflow: hidden;
          // text-overflow:ellipsis;
          // display: -webkit-box;
          // -webkit-line-clamp: 2;
          // -webkit-box-orient: vertical;
        }
      }
    }
    .scroll-col+.scroll-col{
      // margin-left: 10px;
    }
  }
  .indicator{
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    .indicator-item{
      background-color: #EEEEEE;
      width: 20px;
      height: 4px;
      border-radius: 2px;
    }
    .indicator-item + .indicator-item{
      margin-left: 12px;
    }
    .indicator-item-active{
      background-color: #00C8B4;
    }
  }
}
</style>
<style lang="less">
#img-recommend{
  [class*="van-image__error"]{
      // height: auto !important;
      position: static;
      & img{
        object-fit: fill !important;
      }
    }
}
</style>
